<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>viewBox</title>
    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
    <style>
        /* common styles for all examples */

        body {
            margin: 1em;
            font-family: sans-serif;
            background-color: #fffff8;
        }

        h1 {
            font-size: 150%;
        }

        figure {
            display: block;
            background: #cdf;
            width: 90%;
            max-width: 50em;
            box-sizing: border-box;
            margin: 1em auto;
            padding: 0.5em 1em;
            border: solid thin navy;
        }

        figure:nth-of-type(2n) {
            background: #bfc;
        }

        figcaption,
        figure>div {
            display: block;
            vertical-align: middle;
        }

        figure>div {
            text-align: center;
        }

        img,
        svg,
        .bg-svg {
            border: thin dotted darkgrey;
        }

        svg.defs-only {
            display: block;
            position: absolute;
            height: 0;
            width: 0;
            margin: 0;
            padding: 0;
            border: none;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>视图盒子 viewBox</h1>
        <ul>
            <li>svg 元素上的 width, height 为画布宽高</li>
            <li>viewBox 为 4 个数(x y width height), 一个点(x y) 的位置与宽高(width height)</li>
            <li>svg 元素上若没有设置 viewBox, 默认为 x y 为 0, 宽高为 svg 元素上的宽高(width height)</li>
            <li>viewBox 里的元素单位都以 viewBox 上的值为相对参考</li>
            <li><a href="https://css-tricks.com/scale-svg/">参考: https://css-tricks.com/scale-svg/</a></li>
        </ul>
    </div>

    <div class="container">
        <svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
            <linearGradient id="coin" x2="50%" y2="40%" spreadMethod="reflect">
                <stop stop-color="gold" offset="30%" />
                <stop stop-color="goldenrod" offset="70%" />
                <stop stop-color="white" offset="82%" />
                <stop stop-color="gold" offset="92%" />
                <stop stop-color="darkgoldenrod" offset="100%" />
            </linearGradient>
            <radialGradient id="pot" fx="30%" fy="35%">
                <stop stop-color="white" offset="0%" />
                <stop stop-color="gold" offset="15%" />
                <stop stop-color="goldenrod" offset="80%" />
                <stop stop-color="darkgoldenrod" offset="100%" />
            </radialGradient>
            <symbol id="potofgold">
                <g fill="url(#coin)" stroke="darkgoldenrod" stroke-width="0.5">
                    <circle r="5" transform="translate(30,7)" />
                    <circle r="5" transform="translate(35,13)" />
                    <circle r="5" transform="translate(22,10)" />
                    <circle r="5" transform="translate(27,9)" />
                    <circle r="5" transform="translate(18,17)" />
                    <circle r="5" transform="translate(42,18)" />
                    <circle r="5" transform="translate(32,19)" />
                    <circle r="5" transform="translate(30,14)" />
                    <circle r="5" transform="translate(25,15)" />
                    <circle r="5" transform="translate(37,19)" />
                    <circle r="5" transform="translate(31,16)" />
                    <circle r="5" transform="translate(20,18)" />
                    <circle r="5" transform="translate(26,21)" />
                </g>
                <path fill="url(#pot)" stroke="#751" stroke-width="0.5" d="M30,50 C45,50 55,45 55,35
                             Q 55,27 50,25 C55,22 53,15 45,20
                             S 23,25 15,20 S5,22 10,25
                             Q 5,27 5,35 C5,45 15,50 30,50Z" />
            </symbol>
        </svg>
        <figure>
            <figcaption>50x25</figcaption>
            <div>
                <svg viewBox="0 0 60 55" width="50" height="25">
                    <use xlink:href="#potofgold" />
                </svg>
            </div>
        </figure>
        <figure>
            <figcaption>100x50</figcaption>
            <div>
                <svg viewBox="0 0 60 55" width="100" height="50">
                    <use xlink:href="#potofgold" />
                </svg>
            </div>
        </figure>
        <figure>
            <figcaption>200x100</figcaption>
            <div>
                <svg viewBox="0 0 60 55" width="200" height="100">
                    <use xlink:href="#potofgold" />
                </svg>
            </div>
        </figure>
        <figure>
            <figcaption>200x50</figcaption>
            <div>
                <svg viewBox="0 0 60 55" width="200" height="50">
                    <use xlink:href="#potofgold" />
                </svg>
            </div>
        </figure>
        <figure>
            <figcaption>50x50</figcaption>
            <div>
                <svg viewBox="0 0 60 55" width="50" height="50">
                    <use xlink:href="#potofgold" />
                </svg>
            </div>
        </figure>
        <figure>
            <figcaption>50x100</figcaption>
            <div>
                <svg viewBox="0 0 60 55" width="50" height="100">
                    <use xlink:href="#potofgold" />
                </svg>
            </div>
        </figure>
    </div>

</body>

</html>